<template>
  <div
    class="container-pb"
    :style="{
      '--height': `${height}px`,
      '--background': background,
      '--bar-background': barBackground,
      '--width': `${(value / max) * 100}%`,
    }"
  >
    <div class="runway">
      <div class="runway__bar"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 接受外部传递的参数
const props = defineProps({
    max: {
        type: Number,
        default: 100,
    },
    height: {
        type: Number,
        default: 8,
    },
    value: {
        type: Number,
        default: 0,
    },
    background: {
        type: String,
        default: "#DEDFE0",
    },
    barBackground: {
        type: String,
        default: "linear-gradient(to right, #55A8FC 0%, #1989FA 100%)",
    },
});
</script>

<style lang="scss" scoped>
.container-pb {
  // margin-left: 5px;
  margin-top: 5px;
  .runway {
    overflow: hidden;
    width: 100%;
    height: var(--height);

    border-radius: calc(var(--height) / 2);
    background: var(--background);

    .runway__bar {
      width: var(--width);
      height: 100%;

      border-radius: calc(var(--height) / 2);
      background: var(--bar-background);
    }
  }
}
</style>
